<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sandbox: overlay1 - Animsition</title>
  <link href="sandbox.css" rel="stylesheet">
  <link href="../dist/css/animsition.min.css" rel="stylesheet">
  <style media="screen">
    .animsition-overlay.bg-init,
    .animsition-overlay-slide {
      background-color: #81D4FA;
    }
  </style>
</head>
<body>

  <div class="animsition-overlay bg-init">

    <div class="item bg-purple">
      <h1>Animsition: overlay1</h1>
    </div>

    <h2>Defaults</h2>
    <ol>
      <li><a class="animsition-link" href="index.html">Basic</a></li>
      <li><a class="animsition-link" href="options.html">Options</a></li>
      <li><a class="animsition-link" href="data-options.html">Data options</a></li>
      <li><a class="animsition-link" href="methods-in.html">Methods in</a></li>
      <li><a class="animsition-link" href="methods-out.html">Methods out</a></li>
    </ol>

    <h2>Overlays</h2>
    <ol>
      <li><a class="animsition-link" href="overlay1.html" data-animsition-out-class="overlay-slide-out-left">Overlay1</a></li>
      <li><a class="animsition-link" href="overlay2.html" data-animsition-out-class="overlay-slide-out-right">Overlay2</a></li>
    </ol>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
  <script src="../dist/js/animsition.min.js" charset="utf-8"></script>
  <script>
  $(document).ready(function() {
    $('.animsition-overlay').animsition({
      inClass: 'overlay-slide-in-top',
      outClass: 'overlay-slide-out-top',
      overlay : true,
      overlayClass : 'animsition-overlay-slide',
      overlayParentElement : 'body'
    })
    .one('animsition.inStart',function(){

      $(this).removeClass('bg-init');

      $(this)
        .find('.item')
        .append('<h2 class="target">Callback: Start</h2>');

      console.log('event -> inStart');
    })
    .one('animsition.inEnd',function(){
      $('.target', this).html('Callback: End');

      console.log('event -> inEnd');
    });
  });
  </script>

</body>
</html>
